<template>
    <div>
        <avue-form ref="form" v-model="obj" :option="option" @reset-change="emptytChange" @submit="submit">
            <!-- 菜单树 -->
            <template #menuIds="{row}">
                <el-tree
                    :data="menuTreeData"
                    show-checkbox
                    node-key="id"
                    @check="menusCheck"
                    :default-expand-all=false
                    :default-checked-keys="menuDefaultCheckedKeys"
                    :props="menusProps">
                </el-tree>
            </template>
            <!-- 权限树 -->
            <template #authIds="{row}">
                <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText">
                </el-input>
                <el-tree style="padding-top: 10px"
                         ref="authTree"
                         :data="authTreeData"
                         show-checkbox
                         node-key="id"
                         @check="authsCheck"
                         :filter-node-method="filterNode"
                         :default-expand-all=false
                         :default-checked-keys="authDefaultCheckedKeys"
                         :props="{children: 'children', label: 'name'}">
                    <!-- 自定义节点内容 -->
                    <template #="{ node, data }">
                        <span class="custom-tree-node" v-if="data.pid !=='0' && data.id !=='0'">
                          {{ data.method }} --> {{ data.name }}
                            <!-- [{{ data.method }}:{{ data.url }}]-->
                        </span>
                    </template>
                </el-tree>
            </template>
        </avue-form>
    </div>
</template>

<script>

export default {
    // name: "RoleAdd",
    data() {
        return {
            defaultData: {
                name: null,
                code: null,
                desc: '-',
                disable: 0,
                sort: 0,
                menuIds: [],
                authIds: []
            },
            obj: {},
            // 菜单配置
            menuTreeData: [],
            authTreeData: [],
            menuDefaultCheckedKeys: [],
            authDefaultCheckedKeys: [],
            filterText: '',
            menusProps: {
                children: 'menus',
                label: 'name'
            },
        }
    },
    // 接收值父组件传递值
    props: {
        uri: {},   // 接口信息
    },
    computed: {
        option() {
            return {
                // size: "small",
                submitText: '提交',
                emptyText: "关闭",
                submitBtn: true,   // 提交按钮
                emptyBtn: true,    // 清空按钮
                mockBtn: false,    // 模拟按钮
                printBtn: false,   // 打印按钮
                column: [
                    {
                        label: "角色名称",
                        prop: "name",
                        // tip: '这是信息提示',
                        span: 20,
                        maxlength: 32,
                        showWordLimit: true,
                        rules: [{
                            required: true,
                            message: "请输入 角色名称",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: "code",
                        prop: "code",
                        span: 20,
                        maxlength: 32,
                        showWordLimit: true,
                        rules: [{
                            required: true,
                            message: "请输入 角色code",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: "描叙",
                        prop: "desc",
                        span: 20,
                        maxlength: 256,
                        showWordLimit: true,
                        rules: [{
                            required: true,
                            message: "请输入 角色code",
                            trigger: "blur"
                        }],
                    },
                    // {
                    //     label: "是否禁用",
                    //     prop: "disable",
                    //     span: 20,
                    //     type: "switch",
                    //     dicData: getDict(website.Dict.Base.Disable, false),
                    //     rules: [{
                    //         required: true,
                    //     }],
                    // }
                    // {
                    //     label: '排序',
                    //     prop: 'sort',
                    //     span: 20,
                    //     rules: [{
                    //         required: true,
                    //         message: "请输入 排序号",
                    //         trigger: "blur"
                    //     }],
                    // },
                    {
                        label: '菜单权限',
                        prop: 'menuIds',
                        span: 10,
                        rules: [{
                            required: false,
                            message: "请选择 菜单",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: '资源权限',
                        prop: 'authIds',
                        span: 10,
                        rules: [{
                            required: false,
                            message: "请选择 权限",
                            trigger: "blur"
                        }],
                    }
                ]
            }
        }
    },
    async created() {
        // 获取菜单数据
        let menuRes = await this.crud.get(this.uri.findMenuTree, {disable: 0});
        this.menuTreeData = menuRes.data.data;

        // 获取权限数据
        let authRes = await this.crud.get(this.uri.findAuthTree, {disable: 0});
        this.authTreeData = authRes.data.data;
    },
    mounted() {
        this.obj = this.defaultData
    },
    watch: {
        filterText(val) {
            this.$refs.authTree.filter(val);
        }
    },
    methods: {
        emptytChange() {
            // 关闭弹出
            this.$emit('closeDialog', false);
            // 还原默认数据
            this.obj = this.defaultData;
            // this.$message.success('已清空');
        },
        submit(form, done) {
            this.crud.post(this.uri.info, this.obj).then((res) => {
                if (res.data.code == 200) {
                    this.$emit('closeDialog', true);
                }
                done(form);
            }).catch(() => {
                done(form);
            })
        },
        // 共两个参数，
        // 依次为：传递给 data 属性的数组中该节点所对应的对象、
        // 树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
        menusCheck(data, nodes) {
            this.obj.menuIds = [];
            this.obj.menuIds.push.apply(this.obj.menuIds, nodes.checkedKeys);
            this.obj.menuIds.push.apply(this.obj.menuIds, nodes.halfCheckedKeys);
            console.debug("menuIds=", this.obj.menuIds)
        },
        //
        authsCheck(data, nodes) {
            this.obj.authIds = [];
            this.obj.authIds.push.apply(this.obj.authIds, nodes.checkedKeys);     // 全选状态数据
            this.obj.authIds.push.apply(this.obj.authIds, nodes.halfCheckedKeys); // 半选状态数据
            // 过滤包含 tem_ 的临时数据
            this.obj.authIds = this.obj.authIds.filter(id => !id.includes("tem_"));
            console.debug("authIds=", this.obj.authIds)
        },
        filterNode(value, data) {
            if (!value) {
                data.disabled = false;
                return true;
            } else {
                if (data.children != null) {
                    // 存在下级, 判断是否可以全选 (所有下级是否可以被搜索到,可以的话可以点击父级全选)
                    let filterChildrenNodes = data.children.filter(p => (p.name + p.method).indexOf(value) !== -1);
                    data.disabled = filterChildrenNodes.length !== data.children.length;
                } else {
                    // 不存在下级时, 表示为最后一级,直接可以选择
                    data.disabled = false;
                }
                return (data.name + data.method).indexOf(value) !== -1;
            }
        }
    }
}
</script>
